<script setup lang="ts">
import {WxtBiddingConstraintType, WxtBizCode, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";

const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode.关键字推广,
  },
  promotionScene: {
    type: String as PropType<WxtBiddingConstraintType>,
    default: WxtBiddingConstraintType.促进全店成交,
  },
  data: {
    type: Array as PropType<any[]>,
    default: () => []
  }
});
const emit = defineEmits([
  "update:value",
  "next",
  "prev",
]);
const state = reactive({
  enableOcpc: true,
  ocpcMarketingAim: WxtBiddingConstraintType.促进成交,
  ocpcRatio: 30,
})
emit('update:value', {
  enableOcpc: state.enableOcpc,
  ocpcMarketingAim: state.ocpcMarketingAim,
  ocpcRatio: state.ocpcRatio,
  // creativeType: creativeType.value,
});
const creativeFindRequire = () => {
  WxtUtils.customRequest('https://one.alimama.com/creative/findRequire.json', props.bizCode, {
    adgroupList: [
      ...props.data.filter((item: any) => item.key === 'choiceProduct')[0].value.map((item: any) => {
        return {
          material: item
        }
      })
    ],
    creativeOptimization: "black_creative",
    creativeSetMode: "professional",
    itemSelectedMode: "user_define",
    mainPicVideo: "1",
    optimizeTarget: 'shop_interest_new',
    promotionScene: "promotion_scene_crowd",
    promotionType: "item",
    subPromotionType: "item",
  }).then((res: any) => {
    console.log(res);
  });
}
// 打底创意
const creativeType = ref<'intelligence' | 'productImage'>('intelligence');
// 监听state变化 更新value
watch(() => state, () => {
  emit('update:value', {
    enableOcpc: state.enableOcpc,
    ocpcMarketingAim: state.ocpcMarketingAim,
    ocpcRatio: state.ocpcRatio,
    // creativeType: creativeType.value,
  });
}, {
  deep: true,
});
// 投放设备
const device = ref<string[]>(['pc', 'mobile']);
const example = {
  titleCustomSwitch: false,
  customTitle: '',
  images: [
    '主图1',
    '主图2',
    '主图3',
    '主图4',
  ],
  imageIndex: 0,
  device: ['pc', 'mobile'],
}
const columns = [
  {
    title: '#',
    dataIndex: 'id',
    width: 40,
  },
  {
    title: '创意标题',
    dataType: 'custom',
    slot: 'titleCustomSwitch',
  },
  {
    title: '创意图片',
    dataType: 'custom',
    slot: 'images',
  },
  {
    title: '投放设备',
    dataType: 'custom',
    slot: 'device',
  },
  {
    title: '操作',
    dataType: 'custom',
    slot: 'action',
  },
];
const dataSource = ref<any[]>([
  // 遍历出来四个example
  {id: 1, ...example},
  {id: 2, ...example},
  {id: 3, ...example},
  {id: 4, ...example},
]);
</script>

<template>
  <div class="setting">
    <div class="title">智能创意及调价</div>
    <div class="item">
      <a-space>
        <a-space>
          智能调价:
          <a-switch v-model:checked="state.enableOcpc" size="small"/>
        </a-space>
        <a-space>
          调价目标:
          <a-select v-model:value="state.ocpcMarketingAim" size="small" style="width: 100px;">
            <a-select-option :value="WxtBiddingConstraintType.促进成交">促进成交</a-select-option>
            <a-select-option :value="WxtBiddingConstraintType.宝贝点击">宝贝点击</a-select-option>
            <a-select-option :value="WxtBiddingConstraintType.收藏加购">收藏加购</a-select-option>
          </a-select>
        </a-space>
        <a-space>
          溢价比例：
          <a-input-number v-model:value="state.ocpcRatio" size="small" style="width: 100px;" min="30" max="300"
                          step="1"
          >
            <template #addonAfter>%</template>
          </a-input-number>
        </a-space>
      </a-space>
    </div>
    <div class="item">
      <a-space>
        打底创意：
        <a-radio-group size="small" v-model:value="creativeType">
          <a-radio value="intelligence">智能创意</a-radio>
          <a-radio value="productImage">仅商品主图</a-radio>
        </a-radio-group>
      </a-space>
    </div>
    <div style="height: 20px;"></div>
    <div class="title">
      自定义添加创意配置
      &nbsp;&nbsp;&nbsp;&nbsp;
      <a-checkbox-group size="small" v-model:value="device">
        <a-checkbox value="pc">计算机</a-checkbox>
        <a-checkbox value="mobile">移动</a-checkbox>
      </a-checkbox-group>
    </div>
    <div class="item" style="height: 500px;">
      <base-table :columns="columns" :data-source="dataSource" :scroll="{

      }"
      >
        <template #header>
          <div></div>
        </template>
        <template #titleCustomSwitch="row">
          <div style="padding-bottom: 10px;">
            <a-radio-group :value="row.titleCustomSwitch" @change="(e)=>{
              dataSource.find((item)=>item.id === row.id).titleCustomSwitch = e.target.value;
            }" size="small"
            >
              <a-radio :value="true">手动添加</a-radio>
              <a-radio :value="false">同单元标题</a-radio>
            </a-radio-group>
          </div>
          <a-input size="small" :value="row.customTitle" @input="(e)=>{
            dataSource.find((item)=>item.id === row.id).customTitle = e.target.value;
          }" :disabled="!row.titleCustomSwitch" style="width: 100%;"
                   placeholder="请输入创意标题"
          />
        </template>
        <template #images="row">
          <a-select :value="row.imageIndex" @change="(e)=>{
            dataSource.find((item)=>item.id === row.id).imageIndex = e;
          }" style="width: 160px;"
          >
            <a-select-option v-for="(item,index) in row.images" :key="index" :value="index">{{ item }}</a-select-option>
          </a-select>
        </template>
        <template #device="row">
          <a-checkbox-group :value="row.device" @change="(e)=>{
            dataSource.find((item)=>item.id === row.id).device = e;
          }" size="small"
          >
            <a-checkbox value="pc">计算机</a-checkbox>
            <a-checkbox value="mobile">移动</a-checkbox>
          </a-checkbox-group>
        </template>
        <template #action="row">
          <a-space>
            <a-button type="primary" danger size="small" @click="()=>{
              dataSource = dataSource.filter((item)=>item.id !== row.id);
            }"
            >删除
            </a-button>
          </a-space>
        </template>
      </base-table>
    </div>
  </div>

  <a-divider style="margin-top: 10px;"/>
  <a-row type="flex">
    <a-col flex="1">
    </a-col>
    <a-col>
      <a-space>
        <a-button @click="emit('prev',[])">上一步</a-button>
        <a-button type="primary" @click="()=> emit('next',[])">下一步</a-button>
      </a-space>
    </a-col>
    <a-col flex="1">
    </a-col>
  </a-row>
</template>

<style lang="less" scoped>
.setting {
  > .title {
    // 左侧蓝色竖线 10px padding 字号16px 加粗
    font-size: 14px;
    font-weight: bold;
    //color: #1677ff;
    line-height: 30px;
    margin-bottom: 10px;

    &::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 20px;
      background-color: #1677ff;
      margin-right: 10px;
      vertical-align: middle;
      border-radius: 4px;
    }
  }

  > .item {
    padding: 10px 0;
  }
}
</style>
